<div th:fragment="control_table_treegrid">
    <script type="text/javascript">
        $(function(){
            $('#linkResourceModal').on('shown.bs.modal', function (e) {
                var state = $('#linkResourceModal').data("state");
                if(state != "loaded")queryYxpjpzList();
                var inp = e.relatedTarget;
                var url = $(inp).siblings("input").val();
                $("#linkResourceBtnYes").siblings("input[name=link_url]").val(url);
                $('#linkResourceModal').data("ins",inp);
            });
            $("#linkResourceBtnQuery").click(function(){queryYxpjpzList()});
            $("#linkResourceBtnRemove").click(function(){setDataAndClose({})});
            $("#linkResourceBtnYes").click(function(){
                var url = $(this).siblings("input[name=link_url]").val();
                setDataAndClose({BDID:url,MBMC:"外部连接"});
            });
            $("#linkResourcetreegrid").bootstrapTable({
                idField : "BDID",
                striped : true,
                method : "post",
                toolbar : "#linkResourcetreegridToolbar",
                columns:[
                    {
                        field : "MBMC",
                        title : "模板名称"
                    },
                    {
                        field : "",
                        title : "选择页面",
                        events:{
                            "click .select":function(e, value, row, index){
                                setDataAndClose(row);
                            }
                        },
                        formatter:function(value, row, index){
                            var html = "";
                            html += "<a class='select tableToolBarBtn' href='javascript:void(0)' title='确定'><i class=' glyphicon glyphicon-ok'></i></a>";
                            return html;
                        }
                    }
                ]
            });
            function setDataAndClose(row){
                var bdid = row.BDID;
                var inp = $('#linkResourceModal').data("ins");
                $(inp).val(row.MBMC);
                var idInp = $(inp).siblings("input");
                idInp.val(bdid);
                idInp.trigger("change");
                $('#linkResourceModal').modal("hide");
            }
            function queryYxpjpzList(){
                var name = $("#linkResourcetreegridToolbar").children("input[name=name]").val()||"";
                $.QuickRemote.AjaxJson("/tjfx/yxpjpz/queryLinked", function(result){
                    $("#linkResourcetreegrid").bootstrapTable("load", result);
                    $('#linkResourceModal').data("state","loaded");
                },{name:name});
            }
        });
        var get_treegrid_option = function () {
            return {
                idField: "ID",
                treeField: "TITLE",
                striped : true,
                frozenColumns:[[]],
                columns: [[]],
                rownumbers: true,
                fitColumns: true,
                // pagination: true,
                // pagePosition: "bottom",
                pageNumber: 1,
                pageSize: 10,
                pageList: [10, 20, 30, 40, 50],
                data: { "rows" : [
                    {"ID": 1,"width": 1,"TITLE": "根节点"},
                    {"ID": 2,"width": 1,"TITLE": "一级节点","_parentId": 1},
                    {"ID": 3,"width": 1,"TITLE": "二级节点","_parentId": 2}
                        ]}
            };
        };
        function metadata_treegrid(params) {
            var column = {
                field: "TITLE",
                width: 1,
                title: "标题",
                align: "center",
                rowspan: 1,
                colspan: 1,
                rowIndex: 1,
                linkId: "",
                linkMc: "",
                flagIndex: new Date().getTime(),
                showIndex: 0,
                frozenColumns: false
            };
            var option = get_treegrid_option();
            option.columns[0].push($.extend({}, column));
            params = $.extend({}, {
                OPTION: option,
                COLUMN: column,
                SQL: ""
            }, params);
            return $.extend(new metadata_chart_base(params), this);
        }

        function metadata_view_treegrid(control) {
            this.control = control;
            this.cols = 2;
            this.OPTION = function () {
                var _this = this;
                var view = $($("#TREEGRIDOPTION").html());
                var option = this.control.getMetadata("OPTION");
                var column = $.extend({}, this.control.getMetadata("COLUMN"));
                var columns = option.columns;

                view.find("select.setting").each(function (i, item) {
                    var name = $(item).attr("name");
                    var value = option[name];
                    if (name == "pagination") {
                        value = value ? "true" : "false";
                    }
                    $(item).val(value);
                    $(item).change(function () {
                        var name = $(item).attr("name");
                        var value = $(item).val();
                        if (name == "pagination") {
                            value = value == "true";
                        }
                        option[name] = value;
                        _this.linkViewOption(option);
                    });
                });

                var setColumns = function (column) {
                    var column_view = $($("#TREEGRIDCOLUMN").html());
                    column_view.find("input[name],select[name]").each(function (i, item) {
                        var name = $(item).attr("name");
                        $(item).val(column[name]);
                    });
                    column_view.attr({flagIndex:column.flagIndex});
                    view.find("table").append(column_view);
                }
                var getColumns = function (dom) {
                    var tr = $(dom).parents("tr");
                    var flagIndex = tr.find("input[name=flagIndex]").val();
                    var index = getColumn(flagIndex);
                    var name = $(dom).attr("name");
                    var value = $(dom).val();

                    //如果是跨行跨列属性，处理为数字
                    if (name == "colspan" || name == "rowspan") {
                        value = parseInt(value);
                    }
                    //如果是列宽属性，处理为数字
                    if (name == "width") {
                        value = parseFloat(value);
                    }
                    if (index) {
                        //如果是标题行属性，处理元素位置
                        if (name == "rowIndex") {
                            var col = option.columns[index[0]][index[1]];
                            col.rowIndex = value;
                            value -= 1;
                            option.columns[index[0]].splice(index[1], 1);
                            if (option.columns[value]) {
                                option.columns[value].push(col);
                            } else {
                                var cs = [col];
                                option.columns.push(cs);
                            }
                        }else if(name=="linkId"){
                            option.columns[index[0]][index[1]]["linkId"] = value;
                            option.columns[index[0]][index[1]]["linkMc"] = $(dom).siblings("input").val();
                        } else {
                            option.columns[index[0]][index[1]][name] = value;
                        }
                    }
                }
                var getColumn = function (flagIndex) {
                    var arr = option.columns;
                    var index = undefined;
                    $.each(arr, function (i, item) {
                        if (!index) {
                            $.each(item, function (j, col) {
                                if (col.flagIndex == flagIndex) {
                                    index = [i, j];
                                    return false;
                                }
                            });
                        }
                    });
                    return index;
                }
                var sortColumns = function(opt){
                    $.each(opt.columns,function(){
                        $.each(this,function(i,item){
                            var flagIndex = item.flagIndex;
                            var trs = $("tr.column");
                            var tr = $("tr.column[flagIndex="+flagIndex+"]");
                            var index = trs.index(tr);
                            item.showIndex = index;
                        });
                        this.sort(function (a,b) {
                            return a.showIndex - b.showIndex;
                        });
                    });

                }

                for (var i in columns) {
                    var columnRow = columns[i];
                    for (var j in columnRow) {
                        setColumns(columnRow[j]);
                    }
                }
                //keyup
                view.on("keyup change", "input,select", function () {
                    getColumns(this);
                    _this.linkViewOption(option);
                });

                view.on("focus", "input,select", function () {
                    $(this).popover("show");
                });
                view.on("blur", "input,select", function () {
                    $(this).popover("hide");
                });

                //增加列
                view.find(".add-btn").click(function () {
                    var field = _this.cols++;
                    var flagIndex = new Date().getTime();
                    var col = $.extend({}, column, {field: "TITLE" + field, flagIndex: flagIndex});
                    option.columns[0].push(col);
                    setColumns(col);
                    sortColumns(option);
                    _this.linkViewOption(option);
                });
                //删除列
                view.on("click", ".delete-btn", function () {
                    var tr = $(this).parents("tr");
                    var flagIndex = tr.find("input[name=flagIndex]").val();
                    var index = getColumn(flagIndex);
                    if (index) {
                        option.columns[index[0]].splice(index[1], 1);
                        tr.remove();
                        sortColumns(option);
                        _this.linkViewOption(option);
                    }
                });
                //上移
                view.on("click", ".up-btn", function () {
                    var tr = $(this).parents("tr.column");
                    var pre = tr.prev("tr.column");
                    tr.insertBefore(pre);
                    sortColumns(option);
                    _this.linkViewOption(option);
                });
                //下移
                view.on("click", ".down-btn", function () {
                    var tr = $(this).parents("tr.column");
                    var next = tr.next("tr.column");
                    tr.insertAfter(next);
                    sortColumns(option);
                    _this.linkViewOption(option);
                });
                this.settingPanel.append(view);

            }
            this.SQL = function () {
                var _this = this;
                var view = $($("#TREEGRIDSQL").html());
                var option = this.control.getMetadata("OPTION");
                view.find("textarea").val(option.sql).keyup(function () {
                    option.sql = $(this).val();
                });
                //SQL执行按钮
                view.on("click", ".sql-btn", function () {
                    var sql = $(view).find("textarea").val();
                    queryChartBySql(sql, "treegrid", function (result) {
                        option.data.rows = result.data;
                        _this.linkViewOption(option);
                    }, {
                        page : option.pagination,
                        minnumber : 0,
                        maxnumber : option.pageSize
                    });
                });
                this.settingPanel.append(view);
            }
            return $.extend(new metadata_view_chart_base(control), this);
        }

        function metadata_form_view_treegrid(control) {
            this.control = control;
            this.echart = $(control).find(".echarts-div .treegrid-container");
            this.OPTION = function (value) {
                var opt = $.extend(true, {}, {}, value);
                console.log(opt);
                this.echart.treegrid(opt);
                this.echart.treegrid("resize");
            }
            this.SIZE = function(value)
            {
                $(control).find(".echarts-div").height(value.HEIGHT);
                $(control).find(".echarts-div").width(value.WIDTH + "%");
                this.echart.resize();
            }
            return $.extend(new metadata_form_view_chart_base(control), this);
        }
    </script>

    <script type="text/html" id="TREEGRIDOPTION">
        <div class="form-setting-group">
            <table class="setting-control-table">
                <!--<tr>-->
                    <!--<td class="setting-control-title" colspan="9">表头列配置</td>-->
                <!--</tr>-->
                <!--<tr>-->
                    <!--<td class="setting-control-label100">-->
                        <!--是否分页-->
                    <!--</td>-->
                    <!--<td class="setting-control-label100">-->
                        <!--<select name="pagination" class="form-control setting" data-content="是否分页" data-trigger="manual"-->
                                <!--data-placement="bottom">-->
                            <!--<option value="true">是</option>-->
                            <!--<option value="false">否</option>-->
                        <!--</select>-->
                    <!--</td>-->
                    <!--<td class="setting-control-label100">-->
                        <!--分页栏位置-->
                    <!--</td>-->
                    <!--<td class="setting-control-label100">-->
                        <!--<select name="pagePosition" class="form-control setting" data-content="分页栏位置"-->
                                <!--data-trigger="manual"-->
                                <!--data-placement="bottom">-->
                            <!--<option value="top">顶部</option>-->
                            <!--<option value="bottom">底部</option>-->
                            <!--<option value="both">两端</option>-->
                        <!--</select>-->
                    <!--</td>-->
                <!--</tr>-->
                <tr>
                    <td class="setting-control-title" colspan="9">表头列配置</td>
                </tr>
                <tr>
                    <td class="setting-control-label100" style="width:150px;">标题</td>
                    <td class="setting-control-label100">标题行</td>
                    <td class="setting-control-label100">跨行</td>
                    <td class="setting-control-label100">跨列</td>
                    <td class="setting-control-label100">字段</td>
                    <td class="setting-control-label100">是否固定列</td>
                    <td class="setting-control-label100">对齐方式</td>
                    <td class="setting-control-label100">宽度(px)</td>
                    <td class="setting-control-label100">下钻页面</td>
                    <td colspan="3"><a href="javascript:;" class="btn btn-default btn-sm add-btn">增加列</a></td>
                </tr>
            </table>
        </div>
    </script>

    <!-- 控制面板 报表 列详细配置 -->
    <script type="text/html" id="TREEGRIDCOLUMN">
        <tr class="column">
            <td><input name="flagIndex" type="hidden"><input name="title" class="form-control" data-content="报表标题名称"
                                                             data-trigger="manual"
                                                             data-placement="bottom"></td>
            <td><input name="rowIndex" class="form-control" data-content="标题所在的行序号" data-trigger="manual"
                       data-placement="bottom"></td>
            <td><input name="rowspan" class="form-control" data-content="标题所占行数" data-trigger="manual"
                       data-placement="bottom"></td>
            <td><input name="colspan" class="form-control" data-content="标题所占列数" data-trigger="manual"
                       data-placement="bottom"></td>
            <td><input name="field" class="form-control" data-content="配置SQL字段名称" data-trigger="manual"
                       data-placement="bottom"></td>
            <td>
                <select name="frozenColumns" class="form-control" data-content="是否固定列" data-trigger="manual"
                        data-placement="bottom">
                    <option value="true">是</option>
                    <option value="false">否</option>
                </select>
            </td>
            <td>
                <select name="align" class="form-control" data-content="居左、居中、居右" data-trigger="manual"
                        data-placement="bottom">
                    <option value="left">居左</option>
                    <option value="center">居中</option>
                    <option value="right">居右</option>
                </select>
            </td>
            <td><input name="width" class="form-control" data-trigger="manual"
                       data-placement="bottom"></td>
            <td style="width: 150px;"><input name="linkMc" class="form-control" data-content="下钻页面的视图ID" data-trigger="manual"
                                             data-placement="bottom" readonly="readonly" data-target="#linkResourceModal" data-toggle="modal">
                <input  name="linkId" type="hidden"/>
            </td>
            <td width="20"><a href="javascript:void(0);" class="btn btn-default btn-sm up-btn">↑上移</a></td>
            <td width="20"><a href="javascript:void(0);" class="btn btn-default btn-sm down-btn">↓下移</a></td>
            <td><a href="javascript:void(0);" class="btn btn-default btn-sm delete-btn">删除列</a></td>
        </tr>
    </script>
    <!-- 控制面板 报表 SQL配置 -->
    <script type="text/html" id="TREEGRIDSQL">
        <div class="form-setting-group">
            <table class="setting-control-table">
                <tr class="setting-control-title">
                    <td>SQL配置</td>
                </tr>
                <tr>
                    <td><textarea class='form-control' placeholder="请配置SQL语句"></textarea></td>
                </tr>
                <tr>
                    <td><a href="javascript:;" class="btn btn-default btn-sm sql-btn">执行SQL</a></td>
                </tr>
            </table>
        </div>
    </script>
</div>
